<template>
	<view class="rectificationActiveContent">
		<view class="upper">
			<commonNavBar title="调查处理" :showRobot="true"  ></commonNavBar>   
			<view class="step">
				<view v-for="(tabs,index) in stepList" :key="index" @click="stepActive(index)">
					<view :class="{'active': tabIndex == index}">
						{{ tabs.step }}
						<text v-if="index === 0 && contentList.length > 0">({{ contentList.length }})</text>
					</view>
				</view>
			</view>
		</view>
		<view class="centre" v-if="tabIndex == 0 ">
			<view class="li" v-for="(content,index) in contentList" :key="index">
				<view class="title">
					<view class="left">问题项{{index +1}}</view>
				</view>
				<view class="box">
					<view class="text">
						<text class="titles">检查项目：</text>
						<text>{{ content.STANDARD_NAME }}</text>
					</view>
					<view class="text">
						<text class="titles">序号：</text>
						<text>{{ content.CONTENT_NUM }}</text>
					</view>
					<view class="text">
						<text class="titles">检查内容：</text>
						<text>{{ content.CHECK_CONTENT }}</text>
					</view>
					<view class="text">
						<text class="titles">评价：</text>
						<text>{{ content.SELECTION | resultFilter }}</text>
					</view>
					<view class="text" v-if=" content.SELECTION == '2'">
						<text class="titles">问题描述：</text>
						<text>{{ content.PROBLEM_CONTENT }} {{content.PROBLEM_CONTENT_INPUT}}</text>
					</view>
					<view class="text" v-if=" content.SELECTION == '3'">
						<text class="titles">检查说明：</text>
						<text>{{ content.MISSING_ITEM_CONTENT }} {{content.MISSING_ITEM_CONTENT_INPUT}}</text>
					</view>
					<view class="text photo"  v-if=" content.SELECTION == '2' && content.PROBLEM_FILE != undefined">
						<text class="titles">问题照片：</text>
						<image class="image-view" :src="baseUrl + content.PROBLEM_FILE"  v-if=" content.PROBLEM_FILE != undefined"  @click="seePhoto(baseUrl +  content.PROBLEM_FILE)" ></image>
					</view> 
					<view class="text photo" v-else >
						<text class="titles">整改照片：</text>
						<text v-if="content.RECTIFICATION_IMAGE_LIST == undefined || content.RECTIFICATION_IMAGE_LIST.length == 0">无</text>
						<image  v-for="(image,index) in content.RECTIFICATION_IMAGE_LIST"  v-else class="image-view" :src="baseUrl + image"  v-if="content.RECTIFICATION_IMAGE_LIST != undefined"  @click="look(content,index)" ></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 第二个tab -->
		<view class="centre"  v-if="tabIndex == 1 ">
			 <view class="li">
				<view class="title">
					<view class="left">处理信息</view>
				</view>
				<view class="box">
					<view class="text">处理时间：<text>{{ sysData }}</text></view>
					<view class="text"  >
						处理人员： {{investigationInfo.checkPersonnelName}}
					</view> 
					<view class="text">是否立案： 
						<radio-group v-model="investigationInfo.checkResult" @change="caseSaveSwitch" class="custom-radio-group">
							<label v-for="(selectedOptionList,index) in selectedOptionList" :key="index"
								class="labelRadio" :class="{'yes': (investigationInfo.checkResult === '1' && index === 0),
											   'no': (investigationInfo.checkResult === '2' && index === 1)}">
								<radio :value="selectedOptionList.id" :disabled="detail" :checked="investigationInfo.checkResult == selectedOptionList.id " />
								{{ selectedOptionList.option }}
							</label>
						</radio-group>
					</view>
				</view>
				<view class="box" v-if="investigationInfo.checkResult == '1' "> 
					<view class="text photo"  > <view class="image-title">上传立案审批表:</view>	
						<image class="image-view" :src="baseUrl + investigationInfo.filingApprovalUrl"   v-if="investigationInfo.filingApprovalUrl != undefined"  @click="lookInfoImage(baseUrl +  investigationInfo.filingApprovalUrl)" ></image>
						<view class="left-marging-20" v-if="!detail"><image class="add-image" src="@/static/img/addTwo.png" /></view>
						<text @click="uploadFile('1')" v-if="!detail">上传文件</text>
						<view class="left-marging-20" v-if="!detail"><image class="add-image" src="@/static/img/generator.png" /></view>
						<text @click="gcDocument('1')" v-if="!detail">生成文书</text>
					</view> 
					<view class="text photo"  > <view class="image-title">上传决定书:</view>	
						<image class="image-view" :src="baseUrl + investigationInfo.decisionLetterUrl"   v-if="investigationInfo.decisionLetterUrl != undefined"  @click="lookInfoImage(baseUrl +  investigationInfo.decisionLetterUrl)" ></image>
						<view class="left-marging-20" v-if="!detail"><image class="add-image" src="@/static/img/addTwo.png" /></view>
						<text @click="uploadFile('2')" v-if="!detail">上传文件</text>
						<view class="left-marging-20" v-if="!detail"><image class="add-image" src="@/static/img/generator.png" /></view>
						<text @click="gcDocument('2')" v-if="!detail">生成文书</text>
					</view>  
				</view>
				<view class="box" v-if="investigationInfo.checkResult == '2' "> 
					<view class="text photo"  > <view class="image-title">上传不予立案审批表:</view>	
						<image class="image-view" :src="baseUrl + investigationInfo.notFilingApprovalUrl"   v-if="investigationInfo.notFilingApprovalUrl != undefined"  @click="lookInfoImage(baseUrl +  investigationInfo.notFilingApprovalUrl)" ></image>
						<view class="left-marging-20" v-if="!detail"><image class="add-image" src="@/static/img/addTwo.png" /></view>
						<text @click="uploadFile('3')" v-if="!detail">上传文件</text>
						<view class="left-marging-20" v-if="!detail"><image class="add-image" src="@/static/img/generator.png" /></view>
						<text @click="gcDocument('3')" v-if="!detail">生成文书</text>
					</view> 
					 <view class="text"  >
					 	<view class="image-title">不予立案理由： </view>	
					 	<uni-data-select :value="investigationInfo.notFilingCase" :disabled="detail" :localdata="notFilingList" :clear="false" @change="noFilingSwitch" >
					 	</uni-data-select>
					 </view> 
					<view class="text photo"  v-if="showIllustrate" > <view class="image-title">上传情况说明信息:</view>	
						<image class="image-view" :src="baseUrl + investigationInfo.notFilingDescription"   v-if="investigationInfo.notFilingDescription != undefined"  @click="lookInfoImage(baseUrl +  investigationInfo.notFilingDescription)" ></image>
						<view class="left-marging-20" v-if="!detail"><image class="add-image"  src="@/static/img/addTwo.png" /></view>
						<text  @click="uploadFile('4')" v-if="!detail">上传文件</text>
						<view class="left-marging-20" v-if="!detail"><image class="add-image" src="@/static/img/generator.png" /></view>
						<text @click="gcDocument('4')" v-if="!detail">生成文书</text>
					</view> 
				</view>
				<!-- <view class="box" style="margin-top: 30rpx;">
					<view class="text">主体名称：<text>{{ party }}</text></view> 
					<view class="text">处罚决定书编号：<text>{{ penaltyNumber }}</text></view> 
					<view class="text">处罚事项：<text>{{ penalties }}</text></view> 
					<view class="text">生效日期：<text>{{ dateOfPenalty }}</text></view> 
				 </view> -->
			 </view> 
		</view>
		<view class="fixed"  v-if="!detail">
			<button class="determine" @click="determine('2')">提交</button>
			<button class="cancellation" @click="determine('1')">临时保存</button>
		</view>
	</view>
</template>

<script>
 	const currentDate = new Date();
	const year = currentDate.getFullYear();
	const month = String(currentDate.getMonth() + 1).padStart(2, '0');
	const day = String(currentDate.getDate()).padStart(2, '0');
	const formattedDate = `${year}-${month}-${day}`;
	import commonNavBar from '@/components/CommonNavBar.vue';
	 
	export default {
		components:{
			commonNavBar,

		},
		data() {
			return { 
				rectificationId: '',
				sysData : formattedDate,
				tabIndex:0,//选择了第几个tab
				detail:false, 
				baseUrl:uni.$baseUrl,
				stepList: [{
					step: '问题项',
					active: true
				}, {
					step: '调查处理',
					active: false
				}],
				problem: 2,
				investigationInfo:{}, //页面处理情况内容
				contentList: [], //问题项列表
				notFilingList:[],//不予立案的理由列表
				showIllustrate:false,//是否显示上传说明信息
				penaltyNumber:'',
				party:'',
				penalties:'',
				dateOfPenalty:'',
				selectedOptionList: [{
						id: 1,
						option: '立案',
						isChecked: false
					},
					{
						id: 2,
						option: '不立案',
						isChecked: false
					}
				],
			}
		},
		filters:{
			resultFilter(value){
				if(value == undefined || value  == 'undefined'){
					return '';
				} else if(value  === '1'){
					return '是';
				}  else if(value  === '2'){
					return '否';
				}  else if(value  === '3'){
					return '合理缺项';
				} 
				
			}
		},
		onLoad(options) {
			this.investigationId = options.investigationId
			this.detail = false;//options.detail == 'true' ? true:false 
			this.loadData();
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			robot() {
				uni.navigateTo({
					url: '/pages/robot/robot'
				})
			}, 
			noFilingSwitch(e){ 
				//不予立案理由 
				if(e == '其他'){
					this.showIllustrate = true;
				}else{
					this.showIllustrate = false;
				} 
				this.$set(this.investigationInfo,"notFilingCase",e)
			},
			caseSaveSwitch(e){
				this.$set(this.investigationInfo,"checkResult",e.target.value) 
			},
			stepActive(index){
				this.tabIndex = index;
			},
			async determine(type) {
				const  that = this;
				//保存调查处理信息
				const data = {
					investigationId: this.investigationId,
					filing: this.investigationInfo.checkResult,
					temporary: type,
					noFilingReason: this.investigationInfo.notFilingCase
				}
				
				const res = await uni.$api.saveInvestigationInfo(data); 
				if(res.data.code === 0){
					uni.showToast({
						icon:'success',
						title:'保存完成'
					})
					const eventChannel = that.getOpenerEventChannel();
					eventChannel.emit('reloadList');
					uni.navigateBack(); 
				/* 	uni.redirectTo({
						url: '/pages/investigation/investigation'
					}); */
				} else{
					uni.showToast({
						icon:'error',
						title:'保存失败了'
					})
				}
				
			},  
			seePhoto(url) {
				Vue.prototype.$previewImage(url); 
			},
			uploadFile(type) {
				const that = this;
				uni.chooseImage({
					count:1, 
					success:(e) => {   
						uni.uploadFile({
							url: '/investigation/uploadInvestigationFile',
							filePath:  e.tempFilePaths[0],
							header:{
								'content-Type': 'multipart/form-data',
							},
							name:'file',
							formData:{
								investigationId : this.investigationId,
								type: type
							},
							success: (res) => {  
								const result = JSON.parse(res.data ); 
								if(result.code === 0){
									uni.showToast({
										title:'上传成功',
										icon:'error'
									}); 
									console.log(result)
									that.penaltyNumber =result.data.penaltyNumber;
									that.party =result.data.party;
									that.penalties =result.data.penalties;
									that.dateOfPenalty =result.data.dateOfPenalty;
									if(type == '1'){
										that.$set(that.investigationInfo,"filingApprovalUrl", result.data.fileUrl);
									} else if(type == '2'){ 
										that.$set(that.investigationInfo,"decisionLetterUrl", result.data.fileUrl);
									} if(type == '3'){ 
										that.$set(that.investigationInfo,"notFilingApprovalUrl", result.data.fileUrl);
									} if(type == '4'){ 
										that.$set(that.investigationInfo,"notFilingDescription", result.data.fileUrl);
									}
								} else {
									uni.showToast({
										title:'上传失败',
										icon:'error'
									})
								}
							},
							fail : ()=>{
								uni.showToast({
									title:'上传失败',
									icon:'error'
								})
							}
						})
					},
					fail: () => {
						uni.showToast({
							icon:'error',
							title:'图片选择错误'
						})
					}
				})
			},
			look(content,index) { 
				let  imageList = []; 
				if(content.RECTIFICATION_IMAGE_LIST == undefined || content.RECTIFICATION_IMAGE_LIST.length == 0){
					
					uni.showToast({
						icon: 'none',
						title:'暂无整改照片',
						success() {
							return;
						}
					})
					return ;
				}else{
					for (var i = 0; i < content.RECTIFICATION_IMAGE_LIST.length; i++) {
						imageList.push(this.baseUrl + content.RECTIFICATION_IMAGE_LIST[i]);
					}
				}
				uni.previewImage({
					urls:imageList,
					current:index,
					success() {
						return;
					}
				})
			},
			lookInfoImage(url) { 
				Vue.prototype.$previewImage(url); 
			},
			async loadData(){
				//获取详情信息
				
				try { 
					//问题项
					const res = await uni.$api.getInvestigationProblemList({
						investigationId:this.investigationId
					}); 
					
					if(res.data.data != null){
						for (var i = 0; i < res.data.data.length; i++) {
							if(res.data.data[i].RECTIFICATION_IMAGES != undefined ){
								  res.data.data[i].RECTIFICATION_IMAGE_LIST = res.data.data[i].RECTIFICATION_IMAGES.split(",");
							}
						}
						this.contentList = res.data.data;
					}
					//不予处理理由
					const reasonList = await uni.$api.getInvestigationNotFilingList(); 
					for (var i = 0; i < reasonList.data.data.length; i++) { 
						this.notFilingList.push({
							text: reasonList.data.data[i].dictLabel,
							value: reasonList.data.data[i].dictLabel
						});
					}
					this.notFilingList.push({
						text: '其他',
						value: '其他'
					});
					//处理情况
					const investigationInfo = await uni.$api.getInvestigationInfo({
						investigationId: this.investigationId
					}); 
					this.investigationInfo = investigationInfo.data.data || {};
					
					
					
				}  catch (error) {
					console.error(error)
				 
				}
				
			},
			gcDocument( type ){
				const that = this;
				uni.navigateTo({
					url: '/pages/investigation/document/docTemplateList?investigationId='+this.investigationId + "&type="+type,
					events: {
					    //更新不同文书
					    updateDocument: function(data) { 
						  if(type == '1'){
						  	that.$set(that.investigationInfo,"filingApprovalUrl", data);
						  } else if(type == '2'){ 
						  	that.$set(that.investigationInfo,"decisionLetterUrl",  data);
						  } if(type == '3'){ 
						  	that.$set(that.investigationInfo,"notFilingApprovalUrl", data);
						  } if(type == '4'){ 
						  	that.$set(that.investigationInfo,"notFilingDescription",  data);
						  }
					    } 
				    } 
				})
			}
			
		},
		watch: {

		},
	}
</script>

<style lang="scss">
	.rectificationActiveContent {
		background: #F9F9F9;
		height: calc(100vh - 195rpx);

		.upper {
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;

			.title {
				background: url('../../static/img/inspectBg.png');
				background-size: cover;
				width: 100%;
				height: 115rpx;
				line-height: 115rpx;
				position: relative;
				display: flex;
				justify-content: center;

				.arrow {
					position: absolute;
					left: 33rpx;
					top: 50%;
					transform: translate(0%, -50%);
					width: 100rpx;
					height: 100rpx;
					 
					&::before {
						display: block;
						content: "";
						position: absolute;
						top: 50%;
						left: 0%;
						width: 20rpx;
						height: 20rpx;
						border-left: 1px solid #fff;
						border-top: 1px solid #fff;
						transform: translate(0%, -50%) rotate(-45deg);
					}
				}

				text {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing: 1px;
				}

				.intelligence {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translate(0%, -50%);
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					display: flex;
					
					image {
						width: 75rpx;
						height: 64rpx;
					}
				}
			}

			.step {
				display: flex;
				justify-content: space-around;
				height: 80rpx;
				line-height: 80rpx;
				background: #F9F9F9;

				view {
					position: relative;
					font-size: 25rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;

					&.active {
						color: #0552A9;

						&::before {
							display: block;
							content: "";
							position: absolute;
							left: 50%;
							bottom: 0%;
							transform: translate(-50%, 0%);
							width: 100rpx;
							height: 5rpx;
							background: #0552A9;
						}
						
						text {
							margin: 0 0 0 10rpx;
						}
					}
				}
			}
		}

		.centre {
			margin: 195rpx 0 0 0;
			// padding: 0 17.5rpx;
			height: calc(100vh - 280rpx);
			overflow-x: hidden;

			.li {
				background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
				box-shadow: 0rpx 8rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
				margin: 0 auto 12.5rpx;

				.title {
					height: 73rpx;
					line-height: 73rpx;
					background: #E1EAF4;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text-indent: 50rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #002B5B;
				}

				.box {
					padding: 25rpx 50rpx;

					.text {
						font-size: 19rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin: 0 auto 13rpx; 
						line-height: 68rpx;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;

						.titles {
							white-space: nowrap;
						}

						text {
							color: #666666;
							max-width: 500rpx;
						}
						
						text:last-child {
							line-height: 1.6;
						}
						
						.add-image {
							width: 20rpx;
							height: 20rpx;
							margin: 0 6rpx 0 0; 
						}
						
						.image-view {
							width: 120rpx;
							height: 120rpx;
							margin: 0 6rpx 0 0;
							border-radius: 10rpx;
						}
						&:nth-child(even) {
							background: #F9F9F9;
						}
						
						&.photo {
							
							text {
								color: #0552A9;
							}
						}
					}
				}
			}
		}
		
		.fixed {
			position: fixed;
			left: 0;
			bottom: 0;
			height: 92rpx;
			background: #fff;
			padding: 0 95rpx 24rpx 95rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			width: calc(100% - 190rpx);
		
			button {
				width: 269rpx;
				height: 55rpx;
				line-height: 55rpx;
				background: #0552A9;
				border-radius: 10rpx;
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
			
				&.determine {
					color: #fff;
				}
			
				&.cancellation {
					background: none;
					border: 1rpx solid #979797;
					color: #979797;
				}
			}
		}
	}
	
	
	.custom-radio-group {
		display: flex;
	
		.labelRadio {
			display: flex;
			margin: 0 10rpx;
			align-items: center;
		}
	
		/deep/.uni-radio-input {
			width: 20rpx;
			height: 20rpx;
			border: 1rpx solid #979797;
		}
	
		.yes {
	
			/deep/.uni-radio-input {
				background: #07D276 !important;
				border-color: #07D276 !important;
	
				&::before {
					background: #07D276;
					border-radius: 50%;
					font-size: 16rpx;
				}
			}
		}
	
		.no {
	
			/deep/.uni-radio-input {
				background: #FF1F1F !important;
				border-color: #FF1F1F !important;
				position: relative;
	
				&::before {
					content: "";
					position: absolute;
					width: 20rpx;
					height: 4rpx;
					background-color: #fff;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: rotate(45deg) translate(-40%, 120%);
				}
	
				&::after {
					content: "";
					position: absolute;
					width: 20rpx;
					height: 4rpx;
					background-color: #fff;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: rotate(-45deg) translate(-25%, -200%);
				}
			}
		}
	}
	.left-marging-20{
		margin-left: 20px;
	}
	.image-title{
		width: 180rpx;
	}
</style>